import QtQuick 2.12
//import Product 1.0

Item {
    id: root
    visible: true
    width: imgBg.width
    height: imgBg.height

    property int index: 1
    property var _POINTSA: [
        Qt.point(154, 256),
        Qt.point(154, 328), //
        Qt.point(406, 328),
        Qt.point(406, 263)
    ]
    property var _POINTSB: [
        Qt.point(79, 256),
        Qt.point(79, 363), //
        Qt.point(589, 363),
        Qt.point(589, 263)
    ]
    property var lenA1: _POINTSA[1].y - _POINTSA[0].y
    property var lenA2: _POINTSA[2].x - _POINTSA[1].x
    property var lenA3: _POINTSA[2].y - _POINTSA[3].y

    property var lenA: lenA1 + lenA2 + lenA3
    property var currentA: 0

    property var lenB1: _POINTSB[1].y - _POINTSB[0].y
    property var lenB2: _POINTSB[2].x - _POINTSB[1].x
    property var lenB3: _POINTSB[2].y - _POINTSB[3].y

    property var lenB: lenB1 + lenB2 + lenB3
    property var currentB: 0


    Image {
        id: imgBg
        source: "qrc:/images/bg.PNG"
    }

    property var y1: 0
    property var y2: 0
    property var y3: 0
    Timer{
        running: Product.head!=""
        interval: 2000
        onTriggered: y1 = 100
    }
    Timer{
        running: Product.face!=""
        interval: 3000
        onTriggered: y2 = 100
    }
    Timer{
        running: Product.eye!=""
        interval: 4000
        onTriggered: y3 = 100
    }

    Item{
        id: itemBoy
        anchors.right: parent.right
        anchors.rightMargin: 200
//        anchors.verticalCenter: parent.verticalCenter
//        y: 20
        width: 200
        height: 200

        Image {
            source: Product.head
            width: 200
            height: 200
            y: y1
            opacity: y1/100

            Text {
                anchors.verticalCenter: parent.verticalCenter
                anchors.verticalCenterOffset: -20
                anchors.left: parent.right
                anchors.leftMargin: 20
                color: "black"
                text: qsTr("构建 头部")
            }
            Behavior on y{
                NumberAnimation{duration: 1000;}
            }
        }
        Image {
            source: Product.face
            width: 200
            height: 200
            y: y2
            opacity: y2/100
            Behavior on y{
                NumberAnimation{duration: 1000;}
            }
            Text {
                anchors.verticalCenter: parent.verticalCenter
                anchors.left: parent.right
                anchors.leftMargin: 20
                color: "black"
                text: qsTr("构建 脸部")
            }

        }
        Image {
            source: Product.eye
            width: 200
            height: 200
            y: y3
            opacity: y3/100
            Text {
                anchors.verticalCenter: parent.verticalCenter
                anchors.left: parent.right
                anchors.leftMargin: 20
                anchors.verticalCenterOffset: 20
                color: "black"
                text: qsTr("构建 眼部")
            }
            Behavior on y{
                NumberAnimation{duration: 1000;}
            }
        }
    }


}
